Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

swiper

Package Overview
Dependencies
Maintainers
1
Versions
333
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

swiper

Most modern mobile touch slider and framework with hardware accelerated transitions

  • 4.5.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.4M
increased by5.36%
Maintainers
1
Weekly downloads
 
Created

What is swiper?

The swiper npm package is a modern touch slider with hardware accelerated transitions. It is intended for use in mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper is designed to be used in a mobile environment, where touch interactions are fundamental. It provides a number of features like swiping, multiple slides per view, vertical slides, and more.

What are swiper's main functionalities?

Basic Swiper

This code initializes a basic Swiper instance with horizontal direction, loop mode, pagination, navigation arrows, and a scrollbar.

import Swiper from 'swiper';

const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

Multiple Slides Per View

This code sets up a Swiper instance where you can have multiple slides visible at the same time, with space between the slides and clickable pagination.

import Swiper from 'swiper';

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

Vertical Swiper

This code snippet demonstrates how to initialize a Swiper instance that allows vertical swiping with clickable pagination.

import Swiper from 'swiper';

const swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

Other packages similar to swiper

Keywords

FAQs

Package last updated on 13 Sep 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc